<template>
	<view class="box">		
		<scroll-view scroll-y style="width: 720upx; height: calc(100vh - 210upx)" >
			
			<!-- 配送地址编写 -->
			<view class="flex bg-white flex-direction">
				<!-- 上部 -->
				<view class="flex" style="margin-bottom: 20upx; margin-top: 30upx;">
					<view class="cu-tag sm bg-red">默认</view>
					<view style="margin-left: 10upx;font-weight: 500;color: black;">{{userAddress.province}}{{userAddress.city}}</view>
				</view>
				<!-- 下部 -->
				<view class="flex justify-between" style="height: 70upx;" @tap="changeAddress">
					<view class="text-bold text-lg text-black" style="">{{userAddress.detailAddress}}</view>
					<view><text class="cuIcon-right"></text></view>
				</view>
			</view>
				
			<!-- 订单详情开始 -->
			<view style="margin-top: 15upx;">
				<view>
					<!-- 订单项 -->
					<view v-for="(item,index) in orderList" :key="index" class="flex bg-white flex-direction" style="border-top: #D8D8D8 dashed 5upx;">
						<!-- 店铺名称 -->
						<view class="flex align-center bg-white" style="height: 80upx;color: black;">
							<image src="../../static/icon/store.png"style="width: 50upx; height: 50upx; "/>老王水果店
						</view>
						<!-- 上部 -->
						<view class="flex">
							<!-- 图片端 -->
							<view><image mode="widthFix" style="width: 200upx;" :src="item.skuImage"></image></view>
							<!-- 右端 -->
							<view style="width: 550upx;padding-left: 20upx;padding-right: 20upx;">
									<view style="padding: 10upx;">{{item.skuName}}</view>
									<view style="padding: 10upx;" class="flex align-center justify-between ">
										<text>skuId:{{item.skuId}}</text>
									</view>
									<view class="align-center flex justify-between">
										<text style="color: #ff0000;font-size: 110%;">{{item.unitPrice}}<text style="font-size: 60%;">元</text></text>
										<uni-number-box :min="1":max="9" v-model="item.count" :value="item.count" style="margin-right: 20upx; width: 140upx;margin-right: 0upx;"></uni-number-box>
									</view>
									<view class="cu-tag line-red sm" style="margin-top: 9upx;">支持7天无理由退货</view>
							</view>
						</view>
						<!-- 下部 -->
						<view class="bg-white" style="padding-bottom: 20upx; margin-top: 30upx;">
							<view v-for="(item,index) in orderRemarks" :key="index" style="padding-bottom: 50upx; border-top:#FAFAFA solid 0.25upx;">
								<view class="flex justify-between">
									<view style="font-size: 120%;color: black;">{{item.title}}</view>
									<view style="" class="text-gray">{{item.content}}<text class="cuIcon-right text-gray"></text></view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				<view style="background-color: #DDDDDD;height: 3upx;margin-bottom: 40upx;"></view>
				<!-- 第二层开始 -->
				<view class="bg-white" style="padding-bottom: 20upx;">
					<view v-for="(item,index) in orderInfo" :key="index" style="padding-bottom: 50upx; border-top:#FAFAFA solid 0.25upx;">
						<view class="flex justify-between">
							<view style="font-size: 120%;color: black;">{{item.title}}</view>
							<view style="margin-right: 10upx;" class="text-gray">￥{{item.content}}</view>
						</view>
					</view>
				</view>
			
			</view>
		</scroll-view>
		
		
		<!-- 支付开始 -->
		<view  class="flex justify-end align-center bg-white barfixed" style="padding: 20upx;">
			<view style="font-size: 100%;padding-right: 20upx;" class="text-red">应付金额：
				<text style="font-size: 140%;font-weight: bold;">￥{{this.totalPrice}}</text>
			</view>
			<view class="dingjin" style="background: #ff0000;" @tap="createOrder">
				立即下单
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue" // 导入 NumberBox 数字输入框组件
	export default {
		data() {
			return {
				userInfo:{},
				orderList:[],
				orderRemarks:[
					{
						title:'配送',
						content:'快速运输，预计明天到达'
					},
					{
						title:'退货无忧',
						content:'商家赠送运费补贴'
					},
					{
						title:'留言',
						content:'建议留言前先于商家沟通确认'
					}
				],
				orderInfo:[
					{
						title: '商品金额',
						content: 0
					},
					{
						title: '退货无忧',
						content: 5
					},
					{
						title: '运费',
						content: 10
					}
				],
				userAddress:{
						id:0,
						province:'',
						city:'',
						detailAddress:'请配置收获地址'
				}
			}
		},
		components: {
			uniNumberBox
		},
		computed:{
			totalPrice() {
				var totalPrice = 0
				this.orderList.forEach(item=>{
						totalPrice +=  Number(item.unitPrice) * Number(item.count)
				})
				this.orderInfo[0].content = totalPrice
				return totalPrice
			}
		},
		onLoad(options){
			this.orderList = []
			var obj = JSON.parse(decodeURIComponent(options.orderInfo))
			this.orderList = obj
			console.log('orderList',this.orderList)
			this.userInfo = JSON.parse(decodeURIComponent(options.userInfo))
			if(options.hasOwnProperty('userAddress')){
				this.userAddress = JSON.parse(decodeURIComponent(options.userAddress))
				console.log(this.userAddress)
			}
		},
		methods: {
			backTo(){
				uni.navigateBack(-1)
			},
			changeAddress() {
				uni.navigateTo({
					url:`../address/address?orderInfo=${encodeURIComponent(JSON.stringify(this.orderList))}&userInfo=${encodeURIComponent(JSON.stringify(this.userInfo))}`
				})
			},
			createOrder() {
				console.log('123')
				if(this.userAddress.detailAddress == '请配置收获地址'){
					uni.showToast({
						'title': '请先填写收获地址',
						icon: 'none'
					})
					return
				}
				var memberAddress =  this.userAddress.province+this.userAddress.city+this.userAddress.detailAddress
				
				var totalPrice = Number(this.orderInfo[0].content)
				var userId = Number(this.userInfo.id)
				
				// this.orderList
				var itemsList = []
				this.orderList.forEach(item=>{
					itemsList.push({
						skuId:item.skuId,
						skuName:item.skuName,
						skuImage:item.skuImage,
						price:item.unitPrice,
						count:item.count
					})
				})
				this.$request({
					url:'cartorder/order/createOrder',
					params:{
						memberId: userId ,
						memberAddress: memberAddress,
						totalPrice: totalPrice,
						userName: this.userInfo.username,
						mobile: this.userAddress.phone,
						receiverName: this.userAddress.name,
						orderItems: itemsList
					},
					type:'POST'
				}).then(res=>{
					console.log('提交订单接口：res',res)
					uni.navigateTo({
						url:`./pay?orderId=${res.orderId}`
					})
				}).catch(err=>{
					console.log('err',err)
				})
				
			}
		}
	}
</script>

<style>
.box {
	padding-left: 20upx;
	padding-right: 30upx;
	background-color: white;
}
.barfixed {
		position: fixed;
		bottom: 0upx;
		width: 750upx;
		height: 100upx;
		right: 0upx;
	}
	.btns {
		display: flex;
		width: 70vw;
		justify-content: flex-end;
	}
	.dingjin {
		height: 90upx;
		line-height: 100upx;
		text-align: center;
		padding: 0 40upx;
		border-radius: 40upx 40upx 40upx 40upx;
		border-left: none;
		font-size: 30upx;
		color: #fff;
		background-color: red;
		font-weight: bold;
	}

</style>
